<template>
  <div class="content">
    <!-- 数据查询 -->
    <div class="filter-container">
      <el-input
          placeholder="请输入申请人"
          prefix-icon="el-icon-search"
          v-model="listQuery.name"
          @input = "getData()"
          >
      </el-input>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed
        width="50">
      </el-table-column>

      <el-table-column
        prop="account"
        fixed
        label="申请人"
        width="180">
      </el-table-column>

      <el-table-column
        prop="created"
        sortable
        label="申请时间">
        <template slot-scope="{row}">
          <span>{{row.created | getDate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="app_type"
        label="申请类别"
        :filters="[{text:'办公审批',value:1},{text:'差旅审批',value:2},{text:'请假审批',value:3}]"
        :filter-method="filterHandler">
        <template slot-scope="{row}">
          <el-tag :type="row.app_type | applyCategoryStyle">{{row.app_type | applyCategory}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="primary"
            @click="handleCreate(row)" :disabled="row.file_path !=null">生成凭证</el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleDownload(row)" :disabled="row.file_path ==null">下载凭证</el-button>
        </template>
      </el-table-column>

    </el-table>

    <my-pagination v-show="rows>0"
      :total ="rows"
      :page.sync ="listQuery.pageNo"
      :pageSize.sync ="listQuery.pageSize"
      @change = "getData"/>
  </div>
</template>

<script>
import {docList,docCreateFile,docDownload} from '@/api/http'
import {getToken} from '@/common/token'

export default {
  data(){
    return {
      tableData:[], //表格数据
      rows:1, //总数目
      listQuery:{
        pageNo:1,
        pageSize:10,
        name:''
      }
    }
  },
  mounted(){
    this.getData();
  },
  methods:{
    getData(){
      docList(this.listQuery).then(res=>{
        let {code,data} = res.data;
        if(code == 20000){
          this.tableData = data.list; //表格数据
          this.rows = data.rows; //总数目
        }
      })
    },
    //筛选
    filterHandler(value, row, column) {
      //console.log(column);
      const property = column['property'];
      return row[property] === value;
    },
    //生成凭证
    handleCreate(row){
      docCreateFile({id:row.id}).then(res=>{
        let {code,data} = res.data;
        if(code == 20000){
          this.getData(); //查询数据
          this.$notify({
            title: '生成凭证',
            message: '生成凭证成功',
            duration: 2000,
            type: 'success'
          });
        }
      })
    },
    //下载凭证
    handleDownload(row){
      docDownload({id:row.id}).then(res=>{
        let {code,data} = res.data;
        if(code == 20000){
          this.$notify({
            title: '下载凭证',
            message: '下载凭证成功',
            duration: 2000,
            type: 'success'
          });
          //再次发送请求
          this.downloadUrlFile(`${this.url}static/${data.file_path}`);
        }
      })
    },
    //下载数据 
    downloadUrlFile(url){
      const xhr = new XMLHttpRequest();
      xhr.open('GET',url);
      xhr.responseType = 'blob'; //响应类型 blob字节流
      xhr.setRequestHeader('token',getToken());
      xhr.send();
      xhr.onload = ()=>{
        if(xhr.status==200){
          //console.log(xhr.responseURL);  //http://localhost:5058/static/1632890047147.docx
          let fileName = xhr.responseURL.substring(xhr.responseURL.lastIndexOf("/")+1);
          this.saveAs(fileName,xhr.response);
        }
      }
    },
    //<a href="路径" download="名称" ></a>
    saveAs(name,data){
      let blob = new Blob([data]) ; //Blob对象可以看成是存放二进制数据的容器
      let save_link = document.createElement("a"); //动态创建a标签
      save_link.href = window.URL.createObjectURL(blob);//从二进制数据中获取url
      save_link.download = name;
      save_link.click(); //触发a标签；

    }
  }
}
</script>


